<template>
  <div id="nav" v-show="showNav">
    <div>
      <i class="iconfont icon-zuojiantou" v-show="showBack" @click="goBack"></i>
      <span class="nav_title">{{nav_title}}</span>
      <i class="iconfont icon-search" v-show="showSearch" @click="goSearch"></i>
      <i class="iconfont icon-wode" v-show="showMy" @click="toMyClick"></i>
      <span class="login" v-show="showLogin" @click="toLogin">登录/注册</span>
    </div>
  </div>
</template>
<script>
  export default {
    name: "Nav",
    data() {
      return {
      }
    },
    computed: {
      nav_title() {
        return this.$store.state.nav.title;
      },
      showBack() {
        return this.$store.state.nav.showBack;
      },
      showSearch() {
        return this.$store.state.nav.showSearch;
      },
      showMy() {
        return this.$store.state.nav.showMy;
      },
      showNav() {
        return this.$store.state.nav.showNav;
      },
      showLogin() {
        return this.$store.state.nav.showLogin;
      },
    },
    watch: {
      $route: function (to) {
        this.changeFalse();
        if (to.meta.showNav == 1) {
          this.$store.commit("changeShowNav", true);
          if (to.name == "main") {
            this.$store.commit("changeShowSearch", true);
            this.$store.commit("changeShowMy", true);
          } else if (to.meta.showBack == 1) {
            this.$store.commit("changeShowBack", true);
          } else {
            console.log();
          }
        } else {
          console.log();
        }
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1);
        console.log("返回");
      },
      changeFalse() {
        this.$store.commit("changeShowTabBar", false);
        this.$store.commit("changeShowBack", false);
        this.$store.commit("changeShowSearch", false);
        this.$store.commit("changeShowMy", false);
        this.$store.commit("changeShowNav", false);
        this.$store.commit("changeShowLogin", false);
      },
      toMyClick() {
        this.$router.push({ name: "my" });
      },
      goSearch() {
        this.$router.push({ name: "search" });
      },
      toLogin() {
        this.$router.push({ name: "login" });
      }
    },
  }
</script>
<style scoped lang="less">
  #nav {
    width: 100%;
    z-index: 10;
    background-color: #3190e8;
    /* color: white; */
    text-align: center;
    position: fixed;
    left: 0;
    top: 0;
    line-height: 44px;
    /*no */
    font-size: 40px;
    color: white;
    z-index: 999;
  }

  .iconfont {
    font-size: 25px;
    /*no */
  }

  .van-search {
    width: 100%;
  }

  .van-cell {
    font-size: 0.5rem;
  }

  .van-field__left-icon .van-icon {
    margin-top: 0.1rem;
    display: block;
    min-width: 1em;
    font-size: 0.5rem;
    line-height: inherit;
  }

  .icon-zuojiantou {
    position: absolute;
    left: 0.3rem;
  }

  .icon-search {
    position: absolute;
    left: 0.3rem;
  }

  .icon-wode {
    right: 0.4rem;
    position: absolute;
    top: 0.1rem;
  }

  .login {
    right: 0.4rem;
    position: absolute;
    font-size: 0.4rem;
  }

  .quitBtn>.van-button {
    right: 0.4rem;
    position: absolute;
    top: 0.1rem;
    border: none;
    background-color: transparent;
  }
</style>